<template>
  <div>
    <!-- 导航 -->
    <el-breadcrumb separator="/">
      <el-breadcrumb-item><a href="/">首页</a></el-breadcrumb-item>
      <el-breadcrumb-item><a href="/">商品列表</a></el-breadcrumb-item>
      <el-breadcrumb-item><a href="/">添加商品</a></el-breadcrumb-item>
    </el-breadcrumb>
    <el-card class="box-card" shadow="hover">
      <!-- 步骤条
        <el-steps :space="200" :active="1" finish-status="success">
          <el-step title="已完成"></el-step>
          <el-step title="进行中"></el-step>
          <el-step title="步骤 3"></el-step>
        </el-steps> -->
      <!-- 表单 -->
      <el-form :model="ruleForm" :rules="rules" ref="ruleForm" label-width="100px" class="demo-ruleForm login-form">
        <!-- 标题 -->
        <h1 class="title">添加商品</h1>
        <!-- 输入用户名 -->
        <el-form-item label="商品名称：" prop="goodsName">
            <el-input v-model="ruleForm.goodsName"></el-input>
        </el-form-item>
        <!-- 输入昵称 -->
        <el-form-item label="商品价格：" prop="price">
            <el-input v-model="ruleForm.price"></el-input>
        </el-form-item>
        <!-- 文件上传按钮 -->
        <el-upload action="http://adminapi.pyg.com/logo" :on-success="filesuccess" :on-preview="handlePreview" :on-remove="handleRemove" list-type="picture" :headers="headerObj">
            <el-button size="small" type="primary">点击上传</el-button>
          </el-upload>
        <!-- 功能按钮 -->
        <el-form-item>
            <el-button type="primary" @click='save()'>提交</el-button>
            <el-button @click="resetForm('ruleForm')">重置</el-button>
        </el-form-item>
    </el-form>
    </el-card>
  </div>
</template>
<script>
import axios from 'axios';
  export default {
   data(){
      return {
        ruleForm: {
            goodsName:'',
            price:'',
            logoSrc:''
        },
        logoUrl:'',
        // 图片上传组件的headers请求头对象
        headerObj:{},
        fileList: [],
        rules: {
            musicName: [
                { required: true, message: "请输入商品名", trigger: "blur" },
            ],
            singer: [
                { required: true, message: "请输入价格", trigger: "blur" },
            ],
        }
      };
    },
    methods: {
      // 处理图片预览效果
      handlePreview(){

      },
      // 处理移除图片的操作
      handleRemove(){

      },
      // 监听图片上传成功的节点
      // handleSuccess(response){
      //   // console.log(response['data']);
      //   this.logoUrl=response['data'];
      // },
      filesuccess(file){
          // console.log(file);
          // 图片路径
          this.logoSrc = file.data;
          // console.log(this.logoSrc);

      },
      save(){
          this.$http.post('/goods_save',this.ruleForm).then((res)=>{
            console.log(res);
          //   if(res.data.code==200&&res.data.msg=='success'){
          //     this.$message({
          //         message : '添加成功',
          //         type:'success',
          //     });
          //   }else{
          //     this.$message.error('添加失败');
          //   }
          //   this.$router.push('goodsList');
           })
      }
    },
    created() {
     
    },
  }
</script>
<style scoped>
.demo-ruleForm{
    width: 500px;
    /* text-align: center; */
}
.title{
    margin: 0 auto;
    margin: 0px 0px 30px 60px;
}
.login-form{
  margin: 0 auto;
}
</style>
